@extends('common.base-master')

@section('html-head')
    <link rel="stylesheet" href="{{url('css/swiper.min.css')}}">
    <link href="{{url('css/mui.picker.css')}}" rel="stylesheet" />
    <script src="{{url('js/swiper.jquery.min.js')}}"></script>
    <script src="{{url('js/lCalendar.js')}}"></script>
    <link rel="stylesheet" href="{{url('css/lCalendar.css')}}">

@endsection

@section('html-body')
        <!--header star-->
    <header class="mui-bar mui-bar1 mui-bar-nav mui-bar-nav1" id="header" style="background-color: #9a8e84;">
        <a class="btn" href="javascript:history.go(-1)" style="border: none">
            <i class="iconfont icon-shouye"></i>
        </a>
        <div class="top-sch-box top-sch-boxtwo top-sch-boxthree flex-col">
            主页
        </div>
    </header>
    <!--header end-->

    <div class="warp warpthree clearfloat">
        <div class="h-top h-toptwo clearfloat box-s" style="background-color: #ffffff;border: 1px solid #e1e1e1;">
            <p class="tu">
{{--                <img src="@if($userinfo){{route('Api.Image.Show',['id'=>$userinfo->portrait_id])}}@else{{route('Api.Image.Show',['id'=>0])}} @endif"/>--}}
                <img src="{{route('Api.Image.Show',['id'=>0])}}"/>
            </p>
            <p class="nr" style="color:#000000">nickname<span>city</span></p>
        </div>
        <div class="apply recharge clearfloat">
            <div class="appxiugai clearfloat">
                <ul>
                    {{--<li class="ra3 fl">--}}
                        {{--<div style="display: inline">--}}
                            {{--<div style="float: left"><span>真实姓名：</span></div>--}}
                            {{--<div style="float: left"><input type="text" name="" id="uid" value="{{$user->uid}}" /></div>--}}
                        {{--</div>--}}
                    {{--</li>--}}
                    <li class="ra3 fl">
                        <i class="iconfont icon-yonghuming fl"></i>
                        <input type="text" name="" id="realname" value="" placeholder="请输入真实姓名 [必填]" />
                    </li>
                    {{--<li class="ra3 fl">--}}
                        {{--<div style="display: inline">--}}
                            {{--<div style="float: left"><span>性别：</span></div>--}}
                            {{--<div style="float: left"><input type="radio" name="sex" value="1" @if($userinfo && (int)$userinfo->sexual == 1)checked="checked" @endif style="width: 30px" />男</div>--}}
                            {{--<div style="float: left;padding-left: 5px"><input type="radio" name="sex" value="0" @if($userinfo && (int)$userinfo->sexual == 0)checked="checked" @endif style="width: 30px" />女</div>--}}
                        {{--</div>--}}
                    {{--</li>--}}
                    <li class="ra3 fl">
                        <i class="iconfont icon-shouji fl"></i>
                        <input type="text" name="" id="phone" value="" placeholder="请输入手机号码 [必填]" />
                    </li>
                    <li class="ra3 fl">
                        <i class="iconfont icon-shouji fl"></i>
                        <input type="text" name="" id="birthday" value="" placeholder="请输入出生日期" />
                    </li>
                </ul>
            </div>
            <div class="xia clearfloat">
                <a href="#" id="btn_send" class="db fl btn ra3" style="background-color: #ff8b23;width: 100%;height: 1.3rem;">确定</a>
            </div>
        </div>
    </div>
    <script>
        var calendar = new lCalendar();
        calendar.init({
            'trigger': '#birthday',
            'type': 'date'
        });

        jQuery(function($) {
            jQuery.ajaxSetup({
                case: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            function isPhoneNo(phone) {
                var pattern = /^1[34578]\d{9}$/;
                return pattern.test(phone);
            }

            $('#btn_send').click(function(){
                var sex = $('input[name="sex"]:checked').val();
                var realname = $('#realname').val();
                var phone    = $('#phone').val();
                var birthday = $('#birthday').val();
                var uid      = $('#uid').val();

                if(realname.trim().length == 0){
                    FoxUI.toast.show('请输入您的姓名',true);
                }else if(birthday.trim().length == 0){
                    FoxUI.toast.show('请输入您的生日',true);
                }else if(!isPhoneNo(phone)){
                    FoxUI.toast.show('手机号码格式不正确',true);
                }else{
                    $.ajax({
                        type:"post",
                        url:'{{route('Api.User.setUserInfo')}}',
                        dataType:"json",
                        data:{"realname":realname,"sex":sex,"phone":phone,"birthday":birthday,"uid":uid},
                        success:function(obj){
                            if(obj.level == "success"){
                                FoxUI.alert(obj.message,'提示语',function(){
                                    window.location.href="{{route('M.Home.index')}}";
                                });
                            }
                        },
                        error:function(obj){
                            var datajson = obj.responseJSON;
                            FoxUI.alert(datajson.message,'提示语');
                        }
                    });
                }
            });
        });
    </script>
@endsection